<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import goDetail from '@/utils/goDetail'
import { memberCollect, memberCollectBatch } from '@/api/user'
// 获取收藏列表
const collection = ref([])
const params1 = ref({
  collectType: 1
})
const getCollection = async () => {
  const res = await memberCollect(params1.value)
  collection.value = res.data.result.items
}
getCollection()

// 取消收藏
const params2 = ref({
  ids: [],
  type: 1
})
const cancelCollection = async id => {
  params2.value.ids.push(id)
  await memberCollectBatch(params2.value)
  ElMessage.success('删除成功')
  // 刷新页面
  getCollection()
}
</script>

<template>
  <div class="collect">
    <div class="header">
      <span class="title">收藏商品</span>
    </div>
    <div class="body">
      <el-table :data="collection" style="width: 100%; font-size: 16px">
        <el-table-column label="商品图片" width="220">
          <template #default="row">
            <img
              :src="row.row.picture"
              alt=""
              style="width: 150px; height: 150px; cursor: pointer"
              @click="goDetail(row.row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="450" />
        <el-table-column prop="price" label="商品价格" width="150" />
        <el-table-column label="操作" width="100">
          <template #default="row">
            <el-button @click="cancelCollection(row.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.collect {
  width: 1000px;
  background-color: #fff;
  .header {
    width: 900px;
    height: 40px;
    padding: 40px 50px;
    background-color: #3fb399;
    .title {
      font-size: 22px;
      font-weight: bold;
      color: #fff;
    }
  }
  .body {
    width: 920px;
    padding: 40px;
  }
}
</style>
